<template>
  <div class="home-padding">
    <a href="http://www.itxst.com/sortablejs/neuinffi.html" target="_blank">拖拽demo</a>
    <div id="itxst">
      <div data-id="1">item 1</div>
      <div data-id="2">item 2</div>
      <div data-id="3">item 3</div>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'

  export default {
    data() {
      return {
        sortable: null,
      };
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        new Sortable(document.getElementById('itxst'), {
          animation: 150,
          ghostClass: 'blue-background-class'
        });
      }
    }
  }
</script>

<style>
  #itxst {
    margin: 10px auto;
    width: 80%;
  }

  #itxst div {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
  }
</style>

